<template>
	<view class="date-table">
		<view class="flex align-center">
			<view class="week-item" v-for="(item,index) in week" :key="index">{{item}}</view>
		</view>
		<view class="day-list flex flex-wrap align-center" style="margin-top: 20rpx;" v-if="showAll" @touchstart="start" @touchend="end">
			<view class="day-item flex flex-direction align-center justify-center"  v-for="(day,index) in monthList" @click="click(day.date)" :class="selectedDate == day.date ? 'active-date':'default-date'">
				<view class="day">{{getDayText(day.date)}}</view>
				<view class="times">{{day.times ? day.times : ''}}</view>
			</view>
			<view class="month">{{month}}</view>
			<view class="year">{{year}}年</view>
		</view>
		<view class="day-list flex flex-wrap align-center" style="margin-top: 20rpx;"  v-if="!showAll" >
			<view class="day-item flex flex-direction align-center justify-center" v-for="(day,index) in weekList" @click="click(day.date)" :class="selectedDate == day.date ? 'active-date':'default-date'">
				<view class="day">{{getDayText(day.date)}}</view>
				<view class="times">{{day.times ? day.times : ''}}</view>
			</view>
		</view>
		<view class="arrow" @click="showAll = !showAll">
			<u-icon name="arrow-up" v-if="showAll"></u-icon>
			<u-icon name="arrow-down" v-if="!showAll"></u-icon>
		</view>
	</view>
</template>

<script>
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	var moment = require('moment');
	let x1 = ''
	let y1 = ''
	export default {
		data() {
			return {
				week:['一','二','三','四','五','六','日'],
				weekList:[],
				monthList:[],
				showAll: false,
				currentYear:'',
				currentMonth: '',
				currentDate: moment(),
				currentDay:'',
				
				selectedDate:'',
				
				startDate:'',
				endDate:'',
				
				month:'',
				year:'',
				isUser:true
			}
		},
		props:{
			roomId:{
				type: String,
				default: null
			}
		},
		watch:{
			roomId(){
				this.getData()
			},
		},
		methods: {
			setSelectedDate(date){
				this.selectedDate = date
			},
			show(state){
				this.isUser = state
				let now = new Date()
				this.currentDay = now.getDate();
				this.selectedDate = moment().format('YYYY-MM-DD');
				this.currentYear = now.getFullYear()
				this.currentMonth = now.getMonth() + 1
				this.month = now.getMonth() + 1
				this.year = now.getFullYear()
				this.getDays(this.currentYear,this.currentMonth)
				this.getData()
			},
			start(e){
				x1 = e.changedTouches[0].pageX
				y1 = e.changedTouches[0].pageY
			},
			end(e){
				let x2 = e.changedTouches[0].pageX
				let y2 = e.changedTouches[0].pageY
				console.log('X:'+Math.abs(x2 - x1)+',Y:'+Math.abs(y2 - y1))
				if(Math.abs(x2 - x1) > 40 && Math.abs(y2 - y1) < 10 && Math.abs(x2 - x1) > 10*(Math.abs(y2 - y1))){
					// 左右滑动
					if((x2 - x1) > 0) {
						//向右滑
						
						this.month --
						if(this.month < 1){
							this.month = 12
							this.year --
						}
					} else {
						//向左滑
						this.month ++
						if(this.month > 12){
							this.month = 1
							this.year ++
						}
					}
					this.$emit('monthChange',this.month)
					this.getDays(this.year,this.month)
					this.getData()
				}
			},
			click(date){
				this.selectedDate = date
				this.$emit('click',date)
			},
			getDays(year,month){
				console.log('kkkkk',year,month)
				let now = new Date()
				now.setFullYear(year)
				now.setMonth(month-1)
				let days = this.getCountDays(year,month)
				console.log('days',days,moment(now).format('YYYY-MM-DD'))
				
				let first = new Date(now.setDate(1)).getDay()
				let end = new Date(now.setDate(days)).getDay()
				
				let endDays = 7-end
				if(end == 0){
					endDays = 0
				}
				
				let startDays = 0
				if(first == 0){
					startDays = 6
				} else {
					startDays = first - 1
				}
				now.setFullYear(year)
				now.setMonth(month-1)
				now.setDate(1)
				console.log('www',moment(now).format('YYYY-MM-DD'))
				
				this.startDate = moment(now.setDate(1)).subtract(startDays, 'days').format('YYYY-MM-DD')
				this.endDate = moment(now.setDate(days)).add(endDays, 'days').format('YYYY-MM-DD')
				console.log(this.startDate,this.endDate)
				
			},
			getData(){
				request.postWithToken({
					url:'/meet/postMeetTimes',
					data:{
						startDate: this.startDate,
						endDate: this.endDate,
						userId: this.isUser ? this.vuex_user.id : null,
						roomId: this.roomId
					}
				}).then(res=>{
					let arr = []
					let list = res.data
					for (let i = new Date(this.startDate) ; new Date(i).getTime() <= new Date(this.endDate).getTime();) {
						let obj = {
							date:moment(i).format('YYYY-MM-DD'),
							times:this.getTimes(list,i)
						}
						arr.push(obj)
						
						i = moment(i).add(1, 'days')
					}
					this.monthList = arr
					
					if(this.currentMonth == this.month){
						let now = new Date()
						let curDay = now.getDate()
						let week =  now.getDay()
						let startDays = 0
						let endDays = 0
						if(week == 0){
							startDays = 6
						} else {
							startDays = week - 1
							endDays = 7-week
						}
						let wStart = moment().subtract(startDays, 'days').format('YYYY-MM-DD')
						let wEnd = moment().add(endDays, 'days').format('YYYY-MM-DD')
						
						let p = []
						for (let i = new Date(wStart) ; new Date(i).getTime() <= new Date(wEnd).getTime();) {
							let obj = {
								date:moment(i).format('YYYY-MM-DD'),
								times:this.getTimes(list,i)
							}
							p.push(obj)
							
							i = moment(i).add(1, 'days')
						}
						this.weekList = p
					}
				})
			},
			getTimes(arr,date){
				let cur = moment(date).format('YYYY-MM-DD')
				let times = 0
				arr.forEach(item=>{
					if(item.meet_date == cur){
						times++
					}
				})
				return times
			},
			getCountDays(year,month) {
			    var curDate = new Date();
				curDate.setFullYear(year)
			    curDate.setMonth(month);
			    curDate.setDate(0);
				/* 返回当月的天数 */
			    return curDate.getDate();      
			},
			getDayText(date){
				if(moment().format('MM-DD') == moment(date).format('MM-DD')){
					return '今'
				} 
				return moment(date).format('DD')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.month {
		color: #F2F2F2;
		position: absolute;
		top: 50rpx;
		width: 100%;
		text-align: center;
		z-index: 1;
		
		font-size: 160rpx;
		font-weight: bolder;
	}
	.year {
		color: #F2F2F2;
		position: absolute;
		top: -20rpx;
		left: 20rpx;
		text-align: center;
		z-index: 1;
		
		font-size: 34rpx;
		font-weight: bolder;
	}
	.day-list {
		position: relative;
	}
	.arrow {
		position: absolute;
		text-align: center;
		line-height: 36rpx;
		font-size: 20rpx;
		left: 316rpx;
		bottom: -36rpx;
		width: 120rpx;
		height: 36rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.06);
	}
	.date-table {
		padding: 32rpx;
		background-color: #FFFFFF;
		position: relative;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.06);
	}
	.week-item {
		width: 96rpx;
		text-align: center;
		color: #999999;
		font-family: 'PingFangSC-regular';
		font-size: 24rpx;
	}
	.active-date{
		.day {
			color: #FFFFFF;
			background-color: $primary-color;
		}
		.times {
			color: $primary-color;
		}
	}
	.default-date {
		.day {
			color: #222222;
		}
		.times {
			color: #999999;
		}
	}
	.day-item {
		width: 96rpx;
		height: 50rpx;
		text-align: center;
		position: relative;
		z-index: 2;
		margin-top: 20rpx;
		.day {
			font-size: 26rpx;
			font-family: 'PingFangSC-bold';
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 50%;
		}
		.times {
			position: absolute;
			right: 10rpx;
			top: 0;
			font-size: 18rpx;
			font-family: 'PingFangSC-regular';
		}
		
	}
</style>
